<!--
 * @Author: wangming
 * @Date: 2021-05-08 15:24:02
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-17 13:59:50
 * @Description: file content
-->
<template>
  <div class="rowbox">
    <draggable
      :componentData="getComponentData(item.span)"
      data-key="layout"
      v-for="(item, index) in config.children"
      :key="index"
      :delay="50"
      :forceFallback="true"
      chosen-class="drawing-chosen"
      drag-class="drawing-drag"
      @add="(v) => handleAdd(v, item.children)"
      class="drawing-board dragbox pt10 pb10"
      group="form"
      :animation="200"
      :list="item.children"
      tag="el-col"
    >
      <slot v-bind:list="item.children"></slot>
    </draggable>
  </div>
</template>

<script>
import mixins from "./mixins.js";
export default {
  mixins: [mixins],
  methods: {
    getComponentData(span) {
      return { attrs: { span } };
    },
  },
};
</script>

<style lang="scss" scoped>
.rowbox {
  width: 100%;
  display: flex;
}
.dragbox {
  min-height: 70px;
  border: 1px solid #f1f1f1;
}
</style>
